<template>
<div>
    <DaoHangLan></DaoHangLan>
    <div id="container"></div>
  </div>
</template>

<script>
import axios from 'axios'
import DaoHangLan from '@/components/DaoHangLan'
// 根据城市名字定位 https://lbs.baidu.com/jsdemo.htm#SetCitynameCenter
export default {
  components: {
    DaoHangLan
  },
  name: 'MapFind',
  async mounted () {
    const {
      data: { body }
    } = await axios({
      url: 'http://liufusong.top:8080/area/map?id=AREA|19b39d4f-8a36-d6f8'
    //   url: '/data.json'
    })
    const { BMapGL } = window
    const map = new BMapGL.Map('container')
    map.centerAndZoom('杭州', 12) // 初始化地图,设置中心点坐标和地图级别
    console.log(body)
    body.forEach((item) => {
      console.log(item)
      const opts = {
        position: new BMapGL.Point(item.coord.longitude, item.coord.latitude), // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(30, -30) // 设置文本偏移量
      }
      // 创建文本标注对象
      const label = new BMapGL.Label(item.label, opts)
      // 自定义文本标注样式
      label.setStyle({
        color: 'white',
        borderRadius: '50%',
        borderColor: 'limegreen',
        width: '50px',
        height: '50px',
        fontSize: '16px',
        lineHeight: '50px',
        fontFamily: '微软雅黑',
        textAlign: 'center',
        backgroundColor: 'limegreen'
      })
      map.addOverlay(label)
      label.addEventListener('click', function () {
        console.log(item)
        // https://lbsyun.baidu.com/jsdemo.htm#bSetGetMapCenter 设置中心点
        const point = new BMapGL.Point(item.coord.longitude, item.coord.latitude)
        // map.setCenter(point);
        map.centerAndZoom(point, 14)
        map.clearOverlays()
      })
    })
  }
}
</script>

<style scoped lang='less'>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
#container {
  height: 100vh;
}
</style>
